<template>
    <div class="message-container" ref="messageContainer">
        <div class="container">
            <div class="showMessageContainer" ref="showMessageContainer">
                <ShowMessage :content="showMessageObj.content" :duration="showMessageObj.duration"
                    :type="showMessageObj.type" :isShow="isShow">
                </ShowMessage>
            </div>
            <DataForm :handleSubmit="handleSubmit"></DataForm>
            <DataLists title="留言板" :data="refData"></DataLists>
            <div class="loading">
                <Loading v-if="isLoading" :imageUrl="loadSrc"></Loading>
                <h2 class="title" v-else>暂无更多数据</h2>
            </div>
        </div>
    </div>
</template>

<script>
import DataForm from '@/components/MessageArea/DataForm.vue';
import DataLists from '@/components/MessageArea/DataLists.vue';
import { getPageMessage, addMessage } from "@/api/message.js";
import Loading from '@/components/Loading/index.vue';
import loadSrc from "@/assets/loading.svg"
import { setTitle } from '@/composition/getData';
import { ref, onMounted, watch, onBeforeUnmount, reactive, onBeforeMount } from "vue";
import ShowMessage from "@/components/ShowMessage/index.vue"
import Scroll from "@/composition/Scroll.js";
export default {
    components: {
        DataForm,
        DataLists,
        Loading,
        ShowMessage
    },
    setup() {
        const messageContainer = ref(null);
        const page = ref(1);
        const limit = ref(5);
        const total = ref(0);
        const isLoading = ref(false);
        const isShow = ref(false);
        Scroll(messageContainer);


        const showMessageObj = reactive({
            content: "感谢你的留言😘！",
            duration: 3000,
            type: "success",
        })
        let refData = ref({});

        //异步请求数据获取评论
        async function asyncGetData() {
            const res = await getPageMessage({ page: page.value, limit: limit.value });
            if (page.value !== 1) {
                refData.value = {
                    rows: [...refData.value.rows, ...res.rows],
                    total: refData.value.total
                };
            } else {
                refData.value = res;
                console.log(refData.value)
                total.value = Math.ceil(res.total / limit.value);
                console.log(total.value)
            }
        }

        // 监听页码变化
        watch(page, async () => {
            asyncGetData();
            if (page.value !== 1) {
                console.log(page.value)
                isLoading.value = true;
                setTimeout(async () => {
                    await asyncGetData();
                    isLoading.value = false;

                }, 1000);
            }


        }, { immediate: true })
        // 挂载后执行操作
        onMounted(async () => {
            messageContainer.value.addEventListener("scroll", handScroll)
        })

        onBeforeMount(() => {
            setTitle();
        })

        // 绑定滚动事件
        function handScroll() {
            if (messageContainer.value.scrollTop + messageContainer.value.offsetHeight + 10 >= messageContainer.value.scrollHeight) {
                if (page.value === total.value) {
                    page.value = total.value;
                    return;
                }
                page.value++;
            }
        }

        // 销毁之前消除事件
        onBeforeUnmount(() => {
            // 消除事件
            document.removeEventListener("scroll", handScroll)
        })

        // 提交评论
        async function handleSubmit(formData) {
            const res = await addMessage(formData);
            await asyncGetData();
            if (isShow.value) {
                return;
            } else {
                isShow.value = !isShow.value;
                setTimeout(() => {
                    isShow.value = !isShow.value;
                }, showMessageObj.duration)
            }

        }
        return {
            refData,
            messageContainer,
            loadSrc,
            isLoading,
            handleSubmit,
            showMessageObj,
            isShow,
        }
    }
}
</script>

<style lang="less" scoped>
@import url("@/style/var.less");

.message-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    scroll-behavior: smooth;

    .container {
        width: 70%;
        // height: 100%;
        margin: 0 auto;
        position: relative;

    }

    .loading {
        width: 100%;
        position: relative;
        height: 70px;
    }

    .title {
        text-align: center;
        color: @gray;
        font-size: 15px;
    }

}
</style>